<template>
  <div class="page-header">
    <div>
      <RouterLink to="/"> Xing-api vue3 </RouterLink>
    </div>
    <div
      @click="showMenu = !showMenu"
      :class="!showMenu ? 'menu-icon' : 'menu-icon-close'"
    >
      <div class="menu-icon-top"></div>
      <div class="menu-icon-center"></div>
      <div class="menu-icon-bottom"></div>
    </div>
    <!-- <div>
      <van-icon name="user-circle-o" size="24" />
    </div> -->

    <div :class="showMenu ? 'menu-drawer' : 'menu-drawer-close'">
      <div class="menu">
        <ul>
          <li @click="showMenu = false">
            <RouterLink to="/">{{ $t('home') }}</RouterLink>
          </li>
          <li @click="showMenu = false">
            <RouterLink to="/account">{{ $t('account') }}</RouterLink>
          </li>
          <li v-if="deferredPrompt" @click="install">{{ $t('installApp') }}</li>
        </ul>
      </div>
    </div>
    <transition name="fade">
      <div v-if="showMenu" class="menu-overlay"></div>
    </transition>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const showMenu = ref(false)
const pageLocation = ref(null)
watch(showMenu, (val) => {
  if (val) {
    const scrollTop = window.scrollY
    pageLocation.value = scrollTop
    document.body.style.position = 'fixed'
    document.body.style.top = '-' + scrollTop + 'px'
  } else {
    document.body.style.position = 'static'
    window.scrollTo(0, pageLocation.value)
  }
})

const deferredPrompt = ref(null)
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault()
  deferredPrompt.value = e
})
window.addEventListener('appinstalled', () => {
  deferredPrompt.value = null
})
const install = () => {
  deferredPrompt.value.prompt()
  deferredPrompt.value.userChoice.then((choiceResult) => {
    if (choiceResult.outcome === 'accepted') {
      console.log('User accepted the A2HS prompt')
    } else {
      console.log('User dismissed the A2HS prompt')
    }
    deferredPrompt.value = null
  })
}
</script>

<style lang="scss">
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background-color: white;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.menu-icon {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 102;
  .menu-icon-top,
  .menu-icon-bottom,
  .menu-icon-center {
    transition: all 0.3s ease;
    width: 23px;
    height: 2.2px;
    border-radius: 2.2px;
    overflow: hidden;
    background: black;
    display: inline-block;
    content: '';
    position: relative;
  }
  .menu-icon-top {
    margin-bottom: 5.8px;
  }
  .menu-icon-bottom {
    margin-top: 5.8px;
  }
  .menu-icon-center {
    width: 18px;
  }
}
.menu-icon-close {
  @extend .menu-icon;
  .menu-icon-top {
    transform: translateY(8px) rotate(45deg);
  }
  .menu-icon-bottom {
    transform: translateY(-8px) rotate(-45deg);
  }
  .menu-icon-center {
    opacity: 0;
  }
}

.menu-overlay {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
}

.menu-drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 68vw;
  max-width: 320px;
  background: #fff;
  padding-top: 50px;
  z-index: 101;
  transition: right 0.3s ease-in-out;
  overflow-y: scroll;
  .menu {
    padding: 16px 0;
    ul {
      padding: 0;
      list-style: none;
      margin: 0;
      li {
        font-size: 16px;
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        user-select: none;
        &:active {
          background-color: darken(white, 4%);
        }
        a {
          display: block;
          width: 100%;
          height: 100%;
        }
        svg {
          color: #999;
        }
      }
    }
  }
}
.menu-drawer-close {
  @extend .menu-drawer;
  right: -68vw;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease-in-out;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
